<template>
    <div class="app-container">
        <el-card class="box-card" shadow="always" v-show="showSearch">
            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" @submit.native.prevent>
                <el-form-item label="应用名称" prop="applyName">
                    <el-input v-model="queryParams.applyName" placeholder="请输入应用名称" clearable @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item label="应用类型" prop="applyType">
                    <el-select v-model="queryParams.applyType" value-key="" placeholder="请选择应用类型" clearable>
                        <el-option v-for="item in app_type" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>

                </el-form-item>
                <el-form-item label="应用状态" prop="display">
                    <el-select v-model="queryParams.display" value-key="" placeholder="请选择应用状态" clearable>
                        <el-option label="已上架" value="0"></el-option>
                        <el-option label="未上架" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleQuery">搜索</el-button>
                    <el-button @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card shadow="always" :body-style="{ padding: '20px' }" style="margin-top: 10px;">
            <!-- <div slot="header">
            <span></span>
        </div> -->
            <!-- card body -->
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" @click="handleAdd" v-hasPermi="['system:apply:add']">添加应用
                    </el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="danger" :disabled="!multiple" @click="handleBatchDelete"
                        v-hasPermi="['system:apply:remove']">删除
                    </el-button>
                </el-col>
                <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
            </el-row>

            <el-table v-loading="loading" :data="dataSource" @selection-change="handleSelectionChange" size="large">
                <el-table-column type="selection" width="55" align="center" :selectable="selectHandle" />
                <el-table-column label="#" type="index"> </el-table-column>
                <el-table-column label="应用名称" align="center" prop="applyName" width="150" />
                <el-table-column label="应用类型" align="center" prop="applyType" width="120">
                    <template #default="scope">
                        <el-tag>{{ selectDictLabel(app_type, scope.row.applyType) }}</el-tag>
                    </template>
                </el-table-column>>
                <el-table-column label="应用图标" align="center" prop="applyLogo" width="120">
                    <template #default="scope">

                        <ImagePreview :width="100" :height="100" :src="scope.row.applyLogo"
                            :preview-src-list="[scope.row.applyLogo]" />
                    </template>
                </el-table-column>
                <!-- <el-table-column label="创建时间" align="center" prop="createTime" /> -->
                <el-table-column label="状态" align="center" prop="display">
                    <template #default="scope">
                        <el-tag :type="scope.row.display == 0 ? 'success' : 'danger'">
                            {{ scope.row.display == 0 ? '已上架' : '未上架' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button v-hasPermi="['system:apply:edit']" type="text" size="small"
                            @click="handleEdit(scope.row)">编辑</el-button>
                        <el-divider direction="vertical"></el-divider>
                        <el-button v-hasPermi="['system:apply:remove']" type="text" size="small"
                            @click="handleDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" v-model:page.sync="queryParams.pageNum"
                v-model:limit.sync="queryParams.pageSize" @pagination="getList" />
        </el-card>
        <addForm ref="modelForm" @ok="getList"></addForm>
    </div>
</template>
  
<script>
import addForm from './modules/addForm.vue';
import listMixin from '@/mixins/listMixin';
import ImagePreview from '@/components/ImagePreview/index.vue';

export default {
    name: "application",
    components: {
        addForm, ImagePreview
    },
    mixins: [listMixin],
    data() {
        return {
            app_type: [],
            queryParams: {
                orderNo: '',
                pageNum: 1,
                pageSize: 10
            },
            urls: {
                list: '/order/apply/list',
                delete: '/order/apply',
            },
        };
    }, created() {
        this.getDicts(['app_type']);
    },
};
</script>
  